<template>
  <view class="detail-page">
    <!-- 视频区域 -->
    <view v-if="info.type == 1" class="video-container">
      <!-- 1视频 2图片 3pdf 4富文本-->
      <video
        :src="config.beaeUrl + info.source"
        class="video"
        :poster="info.poster"
        :controls="true"
        :show-fullscreen-btn="true"
      />
    </view>
    <image
      v-if="info.type == 2"
      :src="config.beaeUrl + info.source"
      :style="picStyle"
      mode="aspectFill"
      @click="previewImage"
    />

    <!-- 操作步骤说明 -->
    <view class="content" v-if="info.type == 4">
      <view v-html="info.content"> </view>
    </view>
  </view>
</template>

<script setup>
import { watchEffect, ref } from "vue";
import { getOperationDetail } from "@/api/index.js";
import { onLoad } from "@dcloudio/uni-app";
import config from "@/config/public";

const info = ref({
  type: 1, // 1视频 2图片 3pdf 4富文本
  source: "", // 资源地址
  poster: "", // 封面图
});
const picStyle = ref({});

watchEffect(async () => {
  try {
    const image = await uni.getImageInfo({
      src: config.beaeUrl + info.value.source,
    });
    // 图片比例
    const bl = image.width / image.height;
    picStyle.value = {
      width: "750rpx",
      height: 750 / bl + "rpx",
    };
  } catch (error) {
    console.error("获取图片失败:", error);
  }
  return {
    picStyle,
  };
});

onLoad((options) => {
  getOperationDetail(options.id).then((res) => {
    let temp = res.data || {};
    if (temp.type == 4) {
      temp.content = temp.content.replace(/\/prod-api/g, config.beaeUrl);
    }
    info.value = temp;
  });
});

// 预览图片
const previewImage = () => {
  uni.previewImage({
    current: config.beaeUrl + info.value.source,
    urls: [config.beaeUrl + info.value.source],
  });
}
</script>

<style lang="scss" scoped>
.detail-page {
  min-height: 100vh;
  background: #fff;

  .header {
    height: 88rpx;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    position: relative;
    border-bottom: 1rpx solid #f5f5f5;

    .back-icon {
      font-size: 40rpx;
      color: #333;
    }

    .title {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
    }
  }

  .video-container {
    margin: 30rpx;
    width: 92%;
    height: 340rpx;
    border-radius: 20rpx;
    overflow: hidden;
    background: #000;

    .video {
      width: 100%;
      height: 100%;
    }
  }
  .content {
    padding: 30rpx;
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
  }
}
</style>
<style>
:deep(p image),
:deep(p img) {
  width: 100%;
}
</style>
